<template>
  <div class="content-message">
    <div class="message-tit">
      <span>消息中心</span>
    </div>
    <van-notice-bar left-icon="volume-o" mode="closeable">
      请注意保护个人身份消息安全。
    </van-notice-bar>
    <van-grid column-num="3" direction="horizontal">
      <van-grid-item icon="chat-o" text="消息" />
      <van-grid-item icon="friends-o" text="关注" @click="gofollow"/>
      <van-grid-item icon="like-o" text="粉丝" @click="gofans"/>
    </van-grid>
    <div class="messafe-body">
      <div class="body-userslist">
        <van-swipe-cell v-for="(item,index) of sendmessage" :key="index">
          <div class="userlist-box" @click="goim(item)">
            <div class="box-le">
              <div class="le-img">
                <img :src="item.tofrom.uportrait" alt="">
              </div>
            </div>
            <div class="box-rg">
              <div class="rg-le">
                <span>{{ item.tofrom.username }}</span>
                <span>{{ item.message }}</span>
              </div>
              <div class="rg-rg">
                <span>{{item.newTime}}</span>
              </div>
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import time from "@/Photography/assets/js/time";

export default {
  name: "appmessage",
  data(){
    return{
      sendmessage: [],
    }
  },
  created() {
    this.sendmessage = this.$store.state.sendmessagelist
    console.info(this.sendmessage)
    this.sendmessage.forEach(r=>{
      r.newTime = time.timeago(r.sendTime)
    })
    const uid = localStorage.getItem('uid')
    if(!uid){
      Dialog.alert({
        title: '温馨提示',
        message: '您还未登录，暂时无法使用该功能',
      }).then(() => {
        this.$router.replace('/')
      });
    }
  },
  computed:{
  },
  methods:{
    gofollow(){
      this.$router.push({
        name: "follow",
        params: {
          release: 'follow'
        }
      })
    },
    gofans(){
      this.$router.push({
        name: "follow",
        params: {
          release: 'fans'
        }
      })
    },
    goim(item){
      this.$router.push({
        name: "userim",
        params: {
          fromid: item.touser,
          from: item.touser.uid,
          to: item.tofrom.uid,
          toid: item.tofrom,
        }
      })
    }
  },
  watch:{
    sendmessage(){
      console.info(this.sendmessage)
    }
  }
}
</script>

<style scoped lang="scss">
.content-message{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .message-tit{
    width: 100%;
    height: vw(90);
    line-height: vw(90);
    background-color: #ffffff;
    text-align: center;
  }
  .messafe-body{
    flex: 1;
    overflow-y: auto;
    background-color: #ffffff;
    .body-userslist{
      .userlist-box{
        height: vw(140);
        display: flex;
        padding: 0 vw(35);
        box-sizing: border-box;
        align-items: center;
        .box-le{
          padding-right: vw(20);
          width: vw(100);
          height: vw(100);
          .le-img{
            img{
              width: vw(100);
              height: vw(100);
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }
        .box-rg{
          flex: 1;
          display: flex;
          height: vw(80);
          .rg-le{
            width: vw(430);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            span{
              font-size: vw(32);
              font-weight: 500;
              &:last-child{
                font-size: vw(24);
                font-weight: 300;
                color: #d5d5d5;
              }
            }
          }
          .rg-rg{
            flex: 1;
            font-size: vw(24);
            color: #d5d5d5;
            line-height: vw(80);
          }
        }
      }
      .goods-card {
        margin: 0;
        background-color: white;
      }
      .delete-button {
        height: 100%;
      }
    }
  }
}
</style>
